<template>
  <view class="content1">
    <view class="list-warp">
      <view v-for="(v, k) in list" :key="k" class="each">
        <view class="each-list">
          <view class="each-msg">
            <view class="title">
              {{ v.form_template_name }}
            </view>
            <view class="des">
              {{ v.form_template_remark }}
            </view>
            <view class="count"> {{ v.case_number }}個專案使用 </view>
          </view>
          <view class="each-icon">
            <u-image
              src="../../../static/form-icon.png"
              width="152rpx"
              height="173rpx"
              mode="aspectFill"
              border-radius="16rpx"
            ></u-image>
          </view>
        </view>
        <view class="btns">
          <view class="btn" @click.stop="toEditTemplate(v)"> 編輯 </view>
          <view class="btn" @click.stop="onDelete(v, k)"> 刪除 </view>
          <view class="btn" @click.stop="toDetail(v, k)"> 查看 </view>
        </view>
      </view>
    </view>
    <u-popup
      v-model="showPopup"
      border-radius="14"
      mode="center"
      width="600rpx"
      height="300rpx"
    >
      <view class="popup-content">
        <view class="popup-tips"> 提示 </view>
        <view class="popup-c"> 您確定刪除此檢查表嗎？ </view>
        <view class="popup-btns">
          <view class="btn" @click="showPopup = false"> 取消 </view>
          <view class="btn" @click="onComfirm"> 確定 </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import ZPaging from '@/node_modules/z-paging/components/z-paging/z-paging.vue'
import NavBar from '@/component/NavBar'
import { getTemList, deleteTemplate } from '@/api/template.js'
export default {
  name: 'checkForm',
  components: {
    ZPaging,
    NavBar,
  },
	props:{
		list:{
			type:Array,
			default:()=>[]
		}
	},
  data() {
    return {
      showPopup: false,
      curItem: {},
      curIndex: 0,
    }
  },
  methods: {
    onDelete(v, i) {
      this.showPopup = true
      this.curItem = v
      this.curIndex = i
    },
    onComfirm(item) {
      deleteTemplate({
        uid: uni.getStorageSync('uid'),
        id: this.curItem.id,
      }).then((res) => {
        this.$Toast('操縱成功')
        this.showPopup = false
        this.list.splice(this.curIndex, 1)
      })
    },
    toDetail(item) {
      uni.navigateTo({
        url: `/pages/checkForm/detailPage?id=${item.id}&onTemplate=true`,
      })
    },
    // 編輯模板
    toEditTemplate(item) {
      uni.navigateTo({
        url: `/pages/checkForm/forms?casezy_form_template_id=${item.id}&isEdit=true`,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.list {
  padding: 90rpx 24rpx;
  .search {
    margin-bottom: 20rpx;
  }
  .list-warp {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 34rpx;
    .each {
      min-width: 700rpx;
      box-sizing: border-box;
      padding: 32rpx;
      background: #ffffff;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      border: 2rpx solid #e7e7e7;
      .each-list {
        display: flex;
        justify-content: space-between;
        .title {
          font-weight: 400;
          font-size: 30rpx;
          color: #333333;
        }
        .des {
          font-weight: 400;
          font-size: 28rpx;
          color: #979797;
          margin: 30rpx 0;
        }
        .count {
          font-weight: 400;
          font-size: 28rpx;
          color: #3a78fc;
        }
      }
      .btns {
        display: flex;
        margin-top: 30rpx;
        gap: 28rpx;
        .btn {
          width: 156rpx;
          height: 58rpx;
          line-height: 58rpx;
          background: #ffffff;
          border-radius: 12rpx 12rpx 12rpx 12rpx;
          border: 2rpx solid #3a78fc;
          text-align: center;
          color: #3a78fc;
          cursor: pointer;
          &:first-child {
            background: #3a78fc;
            color: #ffffff;
          }
        }
      }
    }
  }
}
.popup-content {
  padding-top: 24rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 300rpx;

  .popup-tips {
    font-size: 36rpx;
    text-align: center;
    color: red;
  }

  .popup-btns {
    display: flex;
    width: 100%;
    border-top: 1px solid #ebedf0;

    .btn {
      width: 50%;
      text-align: center;
      line-height: 88rpx;
      cursor: pointer;

      &:first-child {
        border-right: 1px solid #ebedf0;
        color: #323233;
      }

      &:last-child {
        color: red;
      }
    }
  }
}
</style>
